<template>
  <div class="content">
    <div class="rank-content" :id="id" :color="color" :hollow="hollow"></div>
  </div>
</template>

<script>
export default {
  props: {
    tatolData: {
      type: String,
      default: ""
    },
    surplusData: {
      type: String,
      default: ""
    },
    hollow: {
      type: Boolean,
      default: true
    },
    color: {
      type: Array,
      default: () => {
        return [
          "#0DE8FB",
          "#0E6DE9",
          "#F4CD28",
          "#499A6F",
          "#A3D804",
          "#DE6B00"
        ];
        // return ['#0DE8FB', '#DE6B00', '#F4CD28']
      }
    },
    setKey: {
      type: Object
    },
    labelLine: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      id: "",
      chart: "",
      barWidth: 10
    };
  },
  created() {
    this.id = "smBar-" + Math.random();
  },
  mounted() {
    this.$nextTick(() => {
      this.initBar();
    });
  },
  watch: {
    surplusData() {
      this.initBar();
    }
  },
  methods: {
    initBar() {
      let source = [];
      if (this.surplusData !== undefined && this.surplusData !== null) {
        let percent =
          Number(this.surplusData.replace("GB", "")) /
          Number(this.tatolData.replace("GB", ""));
        let num = percent.toFixed(2) * 100;
        let data = [100];
        let xMax = 125;
        let value = num;
        // debugger;
        let option = {
          tooltip: {
            show: false,
            formatter: "{b} {c}"
          },
          grid: {
            left: 20,
            top: 20,
            bottom: "0",
            right: "0"
          },
          xAxis: [
            {
              max: xMax,
              type: "value",
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                show: false
              },
              splitLine: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              hoverAnimation: false,
              type: "category",
              data: ["其他"],
              nameTextStyle: {
                color: "#ECE9EC",
                fontSize: "18px"
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              }
            }
          ],
          // graphic: [
          //   {
          //     type: "text",
          //     z: -10,
          //     left: 50,
          //     top: "middle",
          //     style: {
          //       fill: "#f60",
          //       text: "自用：总数332  占用 213 空置 119",
          //       font: "bold 14px Microsoft YaHei"
          //     }
          //   }
          // ],
          series: [
            {
              name: " ",
              type: "bar",
              barWidth: this.barWidth,
              hoverAnimation: false,
              silent: true,
              itemStyle: {
                normal: {
                  color: "#ECE9EC"
                }
              },
              barGap: "-100%",
              barCategoryGap: "50%",
              data: data
            },
            {
              name: " ",
              type: "bar",
              hoverAnimation: false,
              barWidth: this.barWidth,
              label: {
                normal: {
                  show: false,
                  position: "right",
                  formatter: "{c}%"
                }
              },
              data: [
                {
                  value: value,
                  itemStyle: {
                    normal: {
                      color: "#5DD1D1"
                    }
                  }
                }
              ]
            }
          ]
        };
        this.chart = this.$echarts.init(document.getElementById(this.id));
        this.chart.setOption(option);
        window.addEventListener("resize", () => {
          this.chart.resize();
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  height: 100px;
  display: flex;
  flex-flow: column;
  // background-color: #009896;

  .rank-content {
    flex: 1;
  }
}
</style>
